<template>
  <div class="setting-box">
    <sHeader name="账号管理" />
    <div class="input-item">
      <van-field v-model="nickName" label="昵称" />
      <van-field v-model="introduceSign" label="个性签名" />
      <van-field v-model="password" label="修改密码" type="password" />
    </div>
    <van-button
      class="save-btn"
      color="#1baeae"
      round
      block
      @click="save"
      type="primary"
    >
      保存
    </van-button>
    <van-button
      class="save-btn"
      color="#1baeae"
      round
      block
      @click="handleLogout"
      type="primary"
    >
      退出登录
    </van-button>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";
import md5 from 'js-md5'
import sHeader from "../components/simpleHeader";
import { EditUserInfo, getUserInfo } from '../api/user';
import { EditAddress } from '../api/address';
import { Toast } from 'vant';
export default {
  name: "setting",
  components: {
    sHeader,
  },
  setup() {
    const state = reactive({
      nickName: "",
      introduceSign: "",
      password: "",
    });
    onMounted(async() => {
        const { data } = await getUserInfo()
        console.log(data,'data')
        state.nickName = data.nickName
        state.introduceSign = data.introduceSign
    })
    const save = async () => {
        const params = {
            introduceSign: state.introduceSign,
            nickName: state.nickName
        }
        if(state.password) {
            params.passwordMd5 = md5(state.password)
        }
        await EditUserInfo(params)
        console.log(params)
        Toast.success('保存成功')
    }
    const handleLogout = () => {}
    return {
      ...toRefs(state),
      save,
      handleLogout
    };
  },
};
</script>

<style lang='less' scoped>
.setting-box {
  .input-item {
    margin-top: 44px;
  }
  .save-btn {
    width: 80%;
    margin: 20px auto;
  }
}
</style>